<template>
<!-- components/Tabs/Tabs.wxml -->
<view class="tabs">
  <view class="tabs_title">
    <view v-for="(item, index) in tabs" :key="index" :class="'title_item ' + (item.isActive?'active':'')" @tap="handleItemTap" :data-index="index">
      {{item.value}}
    </view>
  </view>
  <view class="tabs_content">
    <slot></slot>
  </view>
</view>
</template>

<script>

export default {
  data() {
    return {};
  },

  components: {},
  props: {
    tabs: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    // 点击事件
    handleItemTap(e) {
      // 1. 获取点击的索引
      const {
        index
      } = e.currentTarget.dataset; // console.log(index);
      // 2. 触发父组件中的事件 自定义

      this.$emit("tabsItemChange", {
        detail: {
          index
        }
      });
    }

  }
};
</script>
<style>
@import "./Tabs.css";
</style>